<template>
<div class="order-page">
    <div class="order-list">
      <!-- 标签页 -->
      <el-tabs type="border-card" v-model="action"  @tab-click="handleClick">
        <el-tab-pane label="全部订单" name="0">
          <el-table
            :data="order"
            stripe
            style="width: 100%">
            <el-table-column
              prop="productInfo"
              label="商品信息"
              width="280">
              <template v-slot="scope">
                <div style="display: flex; align-items: flex-start;">
                  <img :src="scope.row.productUrl" alt="" style="width: 60px; height: 60px;">
                  <span style="margin-left: 20px;">{{ scope.row.productName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="price"
              label="单价"
              width="100">
            </el-table-column>
            <el-table-column
              prop="quantity"
              label="数量"
              width="90">
            </el-table-column>
            <el-table-column
              prop="subtotal"
              label="实付款"
              width="90">
              <template v-slot="scope">
                {{ scope.row.price * scope.row.quantity }}
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              width="120">
              <template slot-scope="scope">
                <el-tag>{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status === '未付款'" size="medium " type="success" plain  @click="goPay(scope.row)">去付款</el-button>
                    <el-button v-if="scope.row.status === '未付款'" size="medium " type="success" plain  @click="deleteOrder(scope.row.id)">取消订单</el-button>
                    <!-- <el-button v-if="scope.row.status === '已付款'" size="medium " type="success" plain  @click="showProgress">修改订单</el-button> -->
                    <el-button v-if="scope.row.status === '已发货'" size="medium " type="primary" plain  @click="showProgress(scope.row.logisticsNumber)">查看物流</el-button>
                    <el-button v-if="scope.row.status === '待签收' || scope.row.status === '已发货'"
                    size="medium " type="primary" plain  @click="showAcceptGoods(scope.row)">确认收货</el-button>
                    <el-button v-if="scope.row.status === '已签收'" size="medium " type="danger" plain  @click="showReview(scope.row)">评价</el-button>
                    <el-button v-if="scope.row.status === '已评价'" size="medium " type="danger" plain  @click="Review">查看评价</el-button>
                </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待支付" name="1">
          <el-table
            :data="order"
            stripe
            style="width: 100%">
            <el-table-column
              prop="productInfo"
              label="商品信息"
              width="280">
              <template v-slot="scope">
                <div style="display: flex; align-items: flex-start;">
                  <img :src="scope.row.productUrl" alt="" style="width: 60px; height: 60px;">
                  <span style="margin-left: 20px;">{{ scope.row.productName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="price"
              label="单价"
              width="100">
            </el-table-column>
            <el-table-column
              prop="quantity"
              label="数量"
              width="90">
            </el-table-column>
            <el-table-column
              prop="subtotal"
              label="实付款"
              width="90">
              <template v-slot="scope">
                {{ scope.row.price * scope.row.quantity }}
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              width="120">
              <template slot-scope="scope">
                <el-tag>{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                    <el-button v-if="scope.row.status === '未付款'" size="medium " type="success" plain  @click="goPay(scope.row)">去付款</el-button>
                    <el-button v-if="scope.row.status === '未付款'" size="medium " type="success" plain  @click="deleteOrder(scope.row.id)">取消订单</el-button>
                    <!-- <el-button v-if="scope.row.status === '已付款'" size="medium " type="success" plain  @click="showProgress">修改订单</el-button> -->
                    <el-button v-if="scope.row.status === '已发货'" size="medium " type="primary" plain  @click="showProgress(scope.row.logisticsNumber)">查看物流</el-button>
                    <el-button v-if="scope.row.status === '待签收' || scope.row.status === '已发货'"
                    size="medium " type="primary" plain  @click="showAcceptGoods(scope.row)">确认收货</el-button>
                    <el-button v-if="scope.row.status === '已签收'" size="medium " type="danger" plain  @click="showReview(scope.row)">评价</el-button>
                    <el-button v-if="scope.row.status === '已评价'" size="medium " type="danger" plain  @click="Review">查看评价</el-button>
                </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已支付" name="2">
          <el-table
            :data="order"
            stripe
            style="width: 100%">
            <el-table-column
              prop="productInfo"
              label="商品信息"
              width="280">
              <template v-slot="scope">
                <div style="display: flex; align-items: flex-start;">
                  <img :src="scope.row.productUrl" alt="" style="width: 60px; height: 60px;">
                  <span style="margin-left: 20px;">{{ scope.row.productName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="price"
              label="单价"
              width="100">
            </el-table-column>
            <el-table-column
              prop="quantity"
              label="数量"
              width="90">
            </el-table-column>
            <el-table-column
              prop="subtotal"
              label="实付款"
              width="90">
              <template v-slot="scope">
                {{ scope.row.price * scope.row.quantity }}
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              width="120">
              <template slot-scope="scope">
                <el-tag>{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                    <el-button v-if="scope.row.status === '未付款'" size="medium " type="success" plain  @click="goPay(scope.row)">去付款</el-button>
                    <el-button v-if="scope.row.status === '未付款'" size="medium " type="success" plain  @click="deleteOrder(scope.row.id)">取消订单</el-button>
                    <!-- <el-button v-if="scope.row.status === '已付款'" size="medium " type="success" plain  @click="showProgress">修改订单</el-button> -->
                    <el-button v-if="scope.row.status === '已发货' || scope.row.status === '已付款'" size="medium " type="primary" plain  @click="showProgress(scope.row.logisticsNumber)">查看物流</el-button>
                    <el-button v-if="scope.row.status === '待签收' || scope.row.status === '已发货'"
                    size="medium " type="primary" plain  @click="showAcceptGoods(scope.row)">确认收货</el-button>
                    <el-button v-if="scope.row.status === '已签收'" size="medium " type="danger" plain  @click="showReview(scope.row)">评价</el-button>
                    <el-button v-if="scope.row.status === '已评价'" size="medium " type="danger" plain  @click="Review">查看评价</el-button>
                </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待签收" name="3">
          <el-table
            :data="order"
            stripe
            style="width: 100%">
            <el-table-column
              prop="productInfo"
              label="商品信息"
              width="280">
              <template v-slot="scope">
                <div style="display: flex; align-items: flex-start;">
                  <img :src="scope.row.productUrl" alt="" style="width: 60px; height: 60px;">
                  <span style="margin-left: 20px;">{{ scope.row.productName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="price"
              label="单价"
              width="100">
            </el-table-column>
            <el-table-column
              prop="quantity"
              label="数量"
              width="90">
            </el-table-column>
            <el-table-column
              prop="subtotal"
              label="实付款"
              width="90">
              <template v-slot="scope">
                {{ scope.row.price * scope.row.quantity }}
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              width="120">
              <template slot-scope="scope">
                <el-tag>{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                    <el-button v-if="scope.row.status === '未付款'" size="medium " type="success" plain  @click="goPay(scope.row)">去付款</el-button>
                    <el-button v-if="scope.row.status === '未付款'" size="medium " type="success" plain  @click="deleteOrder(scope.row.id)">取消订单</el-button>
                    <!-- <el-button v-if="scope.row.status === '已付款'" size="medium " type="success" plain  @click="showProgress">修改订单</el-button> -->
                    <el-button v-if="scope.row.status === '已发货'" size="medium " type="primary" plain  @click="showProgress(scope.row.logisticsNumber)">查看物流</el-button>
                    <el-button v-if="scope.row.status === '待签收' || scope.row.status === '已发货'"
                    size="medium " type="primary" plain  @click="showAcceptGoods(scope.row)">确认收货</el-button>
                    <el-button v-if="scope.row.status === '已签收'" size="medium " type="danger" plain  @click="showReview(scope.row)">评价</el-button>
                    <el-button v-if="scope.row.status === '已评价'" size="medium " type="danger" plain  @click="Review">查看评价</el-button>
                </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已签收" name="4">
          <el-table
            :data="order"
            stripe
            style="width: 100%">
            <el-table-column
              prop="productInfo"
              label="商品信息"
              width="280">
              <template v-slot="scope">
                <div style="display: flex; align-items: flex-start;">
                  <img :src="scope.row.productUrl" alt="" style="width: 60px; height: 60px;">
                  <span style="margin-left: 20px;">{{ scope.row.productName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="price"
              label="单价"
              width="100">
            </el-table-column>
            <el-table-column
              prop="quantity"
              label="数量"
              width="90">
            </el-table-column>
            <el-table-column
              prop="subtotal"
              label="实付款"
              width="90">
              <template v-slot="scope">
                {{ scope.row.price * scope.row.quantity }}
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              width="120">
              <template slot-scope="scope">
                <el-tag>{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                    <el-button v-if="scope.row.status === '未付款'" size="medium " type="success" plain  @click="goPay(scope.row)">去付款</el-button>
                    <el-button v-if="scope.row.status === '未付款'" size="medium " type="success" plain  @click="deleteOrder(scope.row.id)">取消订单</el-button>
                    <!-- <el-button v-if="scope.row.status === '已付款'" size="medium " type="success" plain  @click="showProgress">修改订单</el-button> -->
                    <el-button v-if="scope.row.status === '已发货'" size="medium " type="primary" plain  @click="showProgress(scope.row.logisticsNumber)">查看物流</el-button>
                    <el-button v-if="scope.row.status === '待签收' || scope.row.status === '已发货'"
                    size="medium " type="primary" plain  @click="showAcceptGoods(scope.row)">确认收货</el-button>
                    <el-button v-if="scope.row.status === '已签收'" size="medium " type="danger" plain  @click="showReview(scope.row)">评价</el-button>
                    <el-button v-if="scope.row.status === '已评价'" size="medium " type="danger" plain  @click="Review">查看评价</el-button>
                </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- 分页组件 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-size="queryInfo.pagesize"
        :page-sizes="[5, 10, 20, 50]"
        layout="sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <!-- 展示物流界面的对话框 -->
    <el-dialog
          title="物流进度"
          :visible.sync="progressVisible"
          width="40%">
          <!-- 物流进度时间线 -->
          <el-timeline :reverse="true">
              <el-timeline-item
              v-for="(activity, index) in progressInfo"
              :key="index"
              :timestamp="activity.receivingTime">
              {{ activity.status }}  {{activity.company}}
              </el-timeline-item>
          </el-timeline>
    </el-dialog>
    <!-- 支付页面 -->
    <el-dialog
      title="支付"
      :visible.sync="payVisible"
      width="40%">
      <el-tabs v-model="active">
        <el-tab-pane label="微信" name="1">
          <div class="image-container">
            <el-image :src="'http://127.0.0.1:8888/image/d97edc79a0434e7280389585a154d820.png'"
          style="width: 50%;height: 450px;"></el-image>
          </div>
        </el-tab-pane>
        <el-tab-pane label="支付宝" name="2">
          <div class="image-container">
            <el-image src="http://127.0.0.1:8888/image/7829de7ace9e4e44884f33a912556b94.jpg"
            style="width: 40%;height: 450px;"></el-image>
          </div>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer">
        <el-button @click="canel"> 稍后支付 </el-button>
        <el-button type="primary" @click="sure"> 我已支付 </el-button>
      </span>
    </el-dialog>
    <!-- 修改界面 -->
    <!-- 评价界面 -->
    <el-dialog
      title="评价"
      :visible.sync="reviewVisible"
      width="50%"
      :before-close="handleClose">
      <label>评分：</label>
      <el-rate
        v-model="review.rating"
        :colors="colors">
      </el-rate>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入评价内容"
        v-model="review.comment">
      </el-input>
      <span slot="footer">
        <el-button @click="reviewVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureReview">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        userId: null,
        status: '',
        pagenum: 1,
        pagesize: 5
      },
      order: [],
      // 页面初始数据
      action: '0',
      userId: null,
      progressInfo: [],
      progressVisible: false,
      // 支付的显示
      payVisible: false,
      // 默认微信支付
      active: '1',
      pay: [],
      // 评价界面
      reviewVisible: false,
      // 评价内容
      review: {
        orderId: null,
        id: null,
        userId: null,
        productId: null,
        rating: null,
        comment: ''
      },
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      total: 10
    }
  },
  created() {
    this.action = this.$route.params.action
    this.userId = +window.localStorage.getItem('userID')
    this.queryInfo.userId = this.userId
    this.getOrder(this.action)
  },
  methods: {
    async getOrder(action) {
      action = Number(action)
      // 使用映射表来简化状态的查找
      const statusMap = {
        0: '',
        1: '未付款',
        2: '已付款',
        3: '已发货',
        4: '已签收'
      }
      this.queryInfo.status = statusMap[action]
      console.log(this.queryInfo)
      const { data: res } = await this.$axios.get('/order/search', { params: this.queryInfo })
      this.order = res.data.order
      this.total = res.data.total
    },
    // 更换显示面板时
    handleClick(tab, value) {
        this.action = String(tab.index)
        this.handleCurrentChange(1)
        this.getOrder(tab.index)
    },
    // 分页数值改变
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getOrder(this.action)
    },
    handleCurrentChange(newNum) {
      this.queryInfo.pagenum = newNum
      this.getOrder(this.action)
    },
    // 查看物流
    async showProgress(logisticsNumber) {
      console.log(this.order)
      // 获取物流信息
      const { data: res } = await this.$axios.get('/shipment/selectBytrackNumber/' + logisticsNumber)
      console.log(res)
      if (res.code !== 200) {
          return this.$message.error('获取物流信息失败！ ')
      }
      this.progressInfo = res.data.shipment
      this.progressVisible = true
    },
    // 打开支付界面
    goPay(list) {
      this.pay = list
      this.payVisible = true
    },
    // 取消支付
    async canel() {
      this.payVisible = false
    },
    // 确认支付
    async sure() {
      let way = '微信'
      if (this.active === '2') {
          way = '支付宝'
      }
      console.log(this.pay)
      const payList = [{
        id: this.pay.id,
        userId: this.pay.userId,
        productId: this.pay.productId,
        price: this.pay.price,
        quantity: this.pay.quantity,
        way: way,
        status: '已付款',
        addressId: this.pay.addressId
      }]
      const { data: res } = await this.$axios.put('/order/update', payList)
      console.log(res)
      if (res.code !== 200) {
        return this.$message.error('支付失败')
      }
      this.$message.success('付款成功')
      // 刷新页面
      this.getOrder(1)
      this.payVisible = false
    },
    // 删除订单
    async deleteOrder(id) {
      const confirmResult = await this.$confirm('此操作将永久删除该订单, 是否继续?', '删除订单', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (confirmResult !== 'confirm') {
          return this.$message.info('已经取消删除')
        }
        const { data: res } = await this.$axios.delete('/order/delete/' + id)
        console.log(res)
        if (res.code !== 200) {
          return this.$message.error('删除失败！ ')
        }
        this.$message.success('删除成功！ ')
        // 刷新页面
        this.getOrder(1)
    },
    // 确认收货
    async showAcceptGoods(list) {
      console.log(list)
      const List = [{
        id: list.id,
        userId: list.userId,
        productId: list.productId,
        price: list.price,
        quantity: list.quantity,
        status: '已签收',
        addressId: this.pay.addressId
      }]
      const { data: res } = await this.$axios.put('/order/update', List)
      console.log(res)
      if (res.code !== 200) {
        return this.$message.error('')
      }
      this.$message.success('收货成功')
      this.getOrder(3)
    },
    // 用户评价
    showReview(list) {
      this.review.orderId = list.id
      this.review.userId = list.userId
      this.review.productId = list.productId
      this.reviewVisible = true
    },
    async sureReview() {
      console.log(this.review)
      const { data: res } = await this.$axios.post('/review/add', this.review)
      console.log(res)
      if (res.code !== 200) {
        return this.$message.error('评价失败')
      }
      this.$message.success('评价成功')
      this.reviewVisible = false
      const List = [{
        id: this.review.orderId,
        status: '已评价'
      }]
      const { data: rest } = await this.$axios.put('/order/update', List)
      console.log(rest)
    },
    // 监视评价窗口关闭
    handleClose() {},
    // 查看评价
    Review() {}
  }
}
</script>

<style lang="less" scoped>
.order-page {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 20px;
  margin: 0px auto;
  width: 1200px;
}
.order-list {
  flex: 1;
  border-right: 1px solid #ccc;
}
.el-button {
  margin: 10px;
}
.el-rate {
  margin-bottom: 10px;
  margin-block: 5px;
}
.image-container {
  display: flex;
  justify-content: center;
  // align-items: center;
  // height: 450px; /* 设置图片容器的高度 */
}

</style>
